<template>
  <div>
    <b-container fluid class="banner d-none d-sm-block"></b-container>
    <b-container fluid class="d-none d-sm-block">
      <b-row align-h="center">
        <b-col lg="11">
          <div class="content-nav">
            <a-breadcrumb separator=">">
              <a-breadcrumb-item href="/">首页</a-breadcrumb-item>
              <a-breadcrumb-item>招商合作</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
        </b-col>
      </b-row>
    </b-container>
    <b-container fluid>
      <b-row align-h="center">
        <b-col lg="11">
          <b-container fluid>
            <b-row>
              <b-col md="2" class="d-none d-md-block">
                <a-menu v-model="currentActiveMenus">
                  <a-menu-item key="application">入驻申请</a-menu-item>
                  <a-menu-item key="requirements">资质要求</a-menu-item>
                  <a-menu-item key="advantages" disabled>平台优势</a-menu-item>
                  <a-menu-item key="charge">收费标准</a-menu-item>
                  <a-menu-item key="joinPlatform">商家入驻</a-menu-item>
                  <a-menu-item key="joinPlatformQuery">入驻查询</a-menu-item>
                  <a-menu-item key="commonQuestion">常见问题</a-menu-item>
                </a-menu>
              </b-col>
              <b-col sm="12" class="d-none d-sm-block d-md-none">
                <a-menu v-model="currentActiveMenus" mode="horizontal">
                  <a-menu-item key="application">入驻申请</a-menu-item>
                  <a-menu-item key="requirements">资质要求</a-menu-item>
                  <a-menu-item key="advantages" disabled>平台优势</a-menu-item>
                  <a-menu-item key="charge">收费标准</a-menu-item>
                  <a-menu-item key="joinPlatform">商家入驻</a-menu-item>
                  <a-menu-item key="joinPlatformQuery">入驻查询</a-menu-item>
                  <a-menu-item key="commonQuestion">常见问题</a-menu-item>
                </a-menu>
              </b-col>
              <b-col cols="12" class="d-sm-none">
                <a-popover
                  v-model="menuCollapsed"
                  trigger="click"
                  style="position: relative; top: 10px;"
                >
                  <a-menu
                    slot="content"
                    v-model="currentActiveMenus"
                    mode="inline"
                  >
                    <a-menu-item key="application">入驻申请</a-menu-item>
                    <a-menu-item key="requirements">资质要求</a-menu-item>
                    <a-menu-item key="advantages" disabled>
                      平台优势
                    </a-menu-item>
                    <a-menu-item key="charge">收费标准</a-menu-item>
                    <a-menu-item key="joinPlatformQuery">入驻查询</a-menu-item>
                    <a-menu-item key="commonQuestion">常见问题</a-menu-item>
                  </a-menu>
                  <a-button type="primary">菜单</a-button>
                </a-popover>
              </b-col>
              <b-col cols="12" md="10">
                <div class="d-flex justify-content-center">
                  <img src="/images/logo-square.png" width="100" height="100" />
                </div>
                <div v-if="currentActiveMenu === 'application'">
                  <div style="margin-top: 20px;">
                    <p>
                      魁牛作为优秀优质的精选产品社交电商，现已经拥有超100万优质注册会员，<br />
                      而魁牛电商将继续秉承魁牛精选，严格把控入驻品牌品质，为品牌方带来会员电商模式新体验，<br />
                      为千万会员提供极致精选的品牌<br />
                    </p>
                    <p>
                      如果您也和魁牛一样，致力打造最优质的极致精品，欢迎加入我们<br />
                      有意者请点击「入驻开店」按钮，按照指引完整填写商家入驻基本信息并提交。
                      预计在7个工作日内给予回复（魁牛电商供应商反馈邮箱：scgysfk@bmjshare.com）
                    </p>
                  </div>
                  <div class="join-process-img-container">
                    <img src="/images/join-process-0.jpg" />
                    <img src="/images/join-process-1.png" />
                    <img src="/images/join-process-2.png" />
                  </div>
                  <div>
                    <p>
                      魁牛品牌专柜
                    </p>
                    <p>
                      无论您的品牌是国际名牌还是中国名牌，或者已获得中国驰名商标、国家免检产品等称号，<br />
                      供应链优质品牌，魁牛都诚挚邀请您与我们携手合作。我们将把品牌以店铺化的形式呈现您的品牌，<br />
                      您的公司必须是具备法人资格的合法经营的公司或企业，且至少具备以下资格之一：<br />
                    </p>
                  </div>
                  <div class="join-process-img-container">
                    <img src="/images/join-process-3.png" />
                  </div>
                </div>
                <div v-if="currentActiveMenu === 'requirements'">
                  <div class="join-process-img-container">
                    <img src="/images/join-process-0.jpg" />
                    <img src="/images/join-requirements.png" />
                    <img src="/images/join-process-1.png" />
                    <img src="/images/join-process-2.png" />
                  </div>
                  <div>
                    <p>
                      魁牛品牌专柜
                    </p>
                    <p>
                      无论您的品牌是国际名牌还是中国名牌，或者已获得中国驰名商标、国家免检产品等称号，<br />
                      供应链优质品牌，魁牛都诚挚邀请您与我们携手合作。我们将把品牌以店铺化的形式呈现您的品牌，<br />
                      您的公司必须是具备法人资格的合法经营的公司或企业，且至少具备以下资格之一：<br />
                    </p>
                  </div>
                  <div class="join-process-img-container">
                    <img src="/images/join-process-3.png" />
                  </div>
                </div>
                <div v-if="currentActiveMenu === 'advantages'">
                  advantages
                </div>
                <div v-if="currentActiveMenu === 'charge'">
                  <p class="join-process-charge-title">
                    【收费标准】
                  </p>
                  <p class="join-process-charge-content">
                    1.商家在平台运营，平台将按照商品的最终成交金额与对应商品所属类目的费率收取技术服务费。<br />
                    路径：贝店商家中心-规则中心-入驻标准-收费标准-类目佣金制度。<br />
                    2.商家在平台运营，商家需承担店主销售佣金。<br />
                    路径：贝店商家中心-规则中心-入驻标准-收费标准-店主佣金推广制度<br />
                    3.如商品发生退款，则不收取技术服务费。<br />
                    4.贝店有权根据市场情况及自身经营情况调整费率，但调整需提前一个月通知商家。<br />
                    5.在商家有违规行为时，根据相关规则，平台将在原技术服务费基础上加收违约金。<br />
                  </p>
                  <p class="join-process-charge-title">
                    【保证金制度】
                  </p>
                  <p class="join-process-charge-content">
                    1.商家在贝店参与经营活动必须缴纳服务保证金，保证金主要用于保证商家经营活动符合法律法规及贝店的平台规定。<br />
                    2.商家在申请入驻获得批准时需一次性足额缴纳保证金，保证金金额国内联营商家统一为人民币壹万元，
                    全球购国内联营商家为壹万元人民币（全球购境外商家需缴纳捌仟伍佰元美元，手续费需自行承担）；保证金金额代发国内商家统一为人民币伍万元，
                    全球购国内代发商家为伍万元，跨境代发业务商家（含保税、直邮、入仓、代发等形态）缴纳壹万美元（手续费需自行承担）。<br />
                    3.保证金须按照店铺分别缴纳，即商家每开设一个店铺就需要交纳一份保证金，否则不予开设店铺。<br />
                    4.贝店有权根据商家的业务变化及实际违约赔付情况通知商家调整保证金金额，商家应在收到贝店通知后的3个工作日内补足保证金，
                    如果没有及时补足保证金金额的，贝店有权中止合作。<br />
                    5.商家缴纳的保证金将冻结在商家的贝店企业账户中，在冻结期内保证金不产生利息，贝店不开具发票。<br />
                    6.商家需要退出贝店，终止合作，需向贝店提出保证金退还申请，贝店审核通过后会在30天内将保证金退回到您打款银行账户。
                    商家退出时存在前期违约金尚未支付的情况的，贝店有权从保证金余额中扣取。<br />
                    7.因资质造假被清退的商家将不退还保证金，因违规行为扣取的保证金不退还，作为商家违约金赔偿给用户及或平台。<br />
                    8.贝店将根据国家经济情况、市场状况及贝店经营情况，适时适当调整保证金制度。保证金制度的调整会按相关规定提前公示予以通知所有商家。<br />
                  </p>
                </div>
                <div v-if="currentActiveMenu === 'commonQuestion'">
                  <div>
                    <p class="join-process-qa-title">
                      一、入驻资质填写问题
                    </p>
                    <div class="join-process-qa-group">
                      <p class="join-process-qa-question">
                        1、平台对入驻商家的条件有什么要求？
                      </p>
                      <p class="join-process-qa-answer">
                        商家须为具有独立法人资格的公司，因此暂不接受个体工商户、合伙企业和个人独资企业的商家入驻。
                      </p>
                      <p class="join-process-qa-question">
                        2、三证合一的公司资质如何上传和填写？
                      </p>
                      <p class="join-process-qa-answer">
                        ①营业执照注册号，请按照营业执照上的“统一社会信用代码”进行填写；<br />
                        ②组织机构代码证和税务登记证，统一上传三证合一后的营业执照；<br />
                        ③组织机构代码证的有效期请根据营业执照的有效期进行填写。<br />
                      </p>
                      <p class="join-process-qa-question">
                        3、上传的公司资质是否需要盖公章？
                      </p>
                      <p class="join-process-qa-answer">
                        上传的每一份公司资质，包括营业执照、组织机构代码证、税务登记证和法人身份证正/反面，均需提供清晰的原件扫描件（无需盖公章），
                        或提供复印件并盖入驻公司公章。
                      </p>
                      <p class="join-process-qa-question">
                        4、若营业执照的营业期限为长期，结束日期该如何填写？
                      </p>
                      <p class="join-process-qa-answer">
                        结束日期不用填写
                      </p>
                      <p class="join-process-qa-question">
                        5、入驻时填写公司信息与营业执照内容必须保持完全一致吗？
                      </p>
                      <p class="join-process-qa-answer">
                        是，请确保与营业执照上的信息完全一致，比如：注册号的大小写，注册资金（请以数字形式填写人民币，美元按即时汇率兑换）等。
                      </p>
                      <p class="join-process-qa-question">
                        6、已退出平台的商家可否使用原来入驻的帐号重新入驻？
                      </p>
                      <p class="join-process-qa-answer">
                        不可以，必须重新注册新的帐号申请入驻。
                      </p>
                    </div>
                  </div>
                  <div>
                    <p class="join-process-qa-title">
                      二、品牌资质填写问题
                    </p>
                    <div class="join-process-qa-group">
                      <p class="join-process-qa-question">
                        1、在哪里下载品牌授权书模板？
                      </p>
                      <p class="join-process-qa-question">
                        2、什么是品牌完整的授权链条？
                      </p>
                      <p class="join-process-qa-answer">
                        入驻公司拿到的品牌授权能够逐级倒推回品牌商（即商标注册人），<br />
                        例如：A为商标注册人，A授权B，B授权C，C为入驻公司，那么C入驻时需出具A-B-C之间完整的授权证明。
                      </p>
                      <p class="join-process-qa-question">
                        3、如何判断某个品牌的授权类型？
                      </p>
                      <p class="join-process-qa-answer">
                        授权类型&nbsp;&nbsp;&nbsp;&nbsp;定义<br />
                        自有品牌&nbsp;&nbsp;&nbsp;&nbsp;①&nbsp;若商标注册人为公司，入驻公司名称与商标注册人一致<br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        ②&nbsp;若商标注册人为个人，入驻公司的法人与商标注册人一致<br />
                        旗舰授权&nbsp;&nbsp;&nbsp;&nbsp;商标注册人授权入驻公司在贝贝开旗舰店<br />
                        独家代理&nbsp;&nbsp;&nbsp;&nbsp;商标注册人授权入驻公司在贝贝独家销售其品牌的商品<br />
                        一级代理&nbsp;&nbsp;&nbsp;&nbsp;商标注册人直接授权入驻公司销售其品牌的商品<br />
                        二级代理&nbsp;&nbsp;&nbsp;&nbsp;商标注册人授权他人销售其品牌商品，他人再授权入驻公司销售该品牌商品<br />
                        三级代理&nbsp;&nbsp;&nbsp;&nbsp;以此类推<br /><br />
                        品牌方入驻<br />
                        &nbsp;&nbsp;1、商标注册人为公司，商标注册公司名称需与入驻公司名称一致，无需提供品牌授权书；<br />
                        &nbsp;&nbsp;2、商标注册人为个人，需提供以商标注册人为法人的入驻公司营业执照。<br /><br />
                        代理商入驻<br />
                        <br />
                        品牌授权书需满足以下条件：<br />
                        &nbsp;&nbsp;1、需授权在贝店销售；<br />
                        &nbsp;&nbsp;2、授权书需注明授权期限、落款（个人授权需亲笔签名+手印）；<br />
                        &nbsp;&nbsp;3、若商标注册人是个人，需提供商标注册人身份证正反面复印件<br />
                        &nbsp;&nbsp;4、需要确保授权链条的完整，即申请入驻公司拿到的授权能够逐级逆推回品牌方。
                      </p>
                      <p class="join-process-qa-question">
                        4、如何填写品牌授权有效期？
                      </p>
                      <p class="join-process-qa-answer">
                        1）商标注册证（R标）<br />
                        &nbsp;&nbsp;①若为自有品牌，按照商标注册证或续展证明（若办理过续展）的有效时间填写；<br />
                        &nbsp;&nbsp;②若为非自有品牌，请根据授权给入驻公司的授权书上的有效时间填写；<br />
                        2）商标受理通知书（TM标）<br />
                        &nbsp;&nbsp;授权结束日期按照商标受理通知书的申请日期往后推18个月内。（商标受理通知书的有效期为18个月）<br />
                        3）特别说明<br />
                        &nbsp;&nbsp;若授权链条中的任一授权有效期超出商标注册证或授权链条上级的授权时间，则授权无效。<br />
                        &nbsp;&nbsp;举例，A为商标注册人，B为入驻公司，商标注册证的有效期为2015年1月2日到2025年1月1日，
                        A授权B的授权书上授权有效期为2017年1月1日到2027年1月1日（超出商标有效期的结束时间2025年1月1日），
                        则A授权给B的授权书无效，B商家需重新联系A提供在商标注册证有效期内的授权书。
                      </p>
                      <p class="join-process-qa-question">
                        5、提交的质检报告具体标准是什么？
                      </p>
                      <p class="join-process-qa-answer">
                        1）质检报告检测项标准<br />
                        &nbsp;&nbsp;每个品牌须提供一份最近2年内的质检报告，其中，一次性卫生用品、化妆品要求一年内，食品要求半年内质检报告。<br />
                        &nbsp;&nbsp;商家提交给贝贝的质检报告，需符合贝贝要求的质检项目。具体标准详见：《质检报告检测项标准》<br />
                        2）质检报告的委托单位<br />
                        &nbsp;&nbsp;质检报告的委托单位需为入驻公司；<br />
                        &nbsp;&nbsp;若质检报告的委托单位非入驻公司，需提供质检报告的委托单位与入驻公司的关系证明，包括但不限于双方加工协议，授权关系证明等。<br />
                        3）报关单和出入境检验检疫证明<br />
                        &nbsp;&nbsp;进口商品提供一年内报关单和检验检疫证明，报关单上需有对应品牌或商品SKU信息、报关单上需有报关盖章、报关公司非入驻公司，需提供与入驻公司的合作合同。<br />
                        <br />
                        常见驳回原因:<br />
                        &nbsp;&nbsp;1、授权链条不完整；总代理需先获得商标注册人授权，逐级授权才有效，如子母公司，需出示关系凭证，加盖主体公司公章；或提供商标许可使用合同。<br />
                        &nbsp;&nbsp;2、质检报告的委托单位关系；质检报告和3C强制认证委托单位如非入驻公司或品牌方，需证明入驻公司/品牌方与出具质检报告公司或3C强制认证公司的关系。<br />
                      </p>
                    </div>
                  </div>
                </div>
              </b-col>
            </b-row>
          </b-container>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
export default {
  layout: 'staticBanner',
  data() {
    return {
      currentActiveMenus: ['application'],
      menuCollapsed: false,
    };
  },
  computed: {
    currentActiveMenu() {
      if (this.currentActiveMenus.length === 0) {
        return null;
      }
      return this.currentActiveMenus[0];
    },
  },
  watch: {
    currentActiveMenus(val, prev) {
      if (val.length > 0 && val[0] === 'joinPlatform') {
        this.currentActiveMenus = prev;
        this.$router.push('/joinPlatform');
      } else if (val.length > 0 && val[0] === 'joinPlatformQuery') {
        this.currentActiveMenus = prev;
        this.$router.push('/application/query');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  height: 330px;
  background-image: url('/images/header-bg.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
</style>

<style lang="scss" scoped>
.content-nav {
  margin: 24px 12px;
}
p {
  text-align: center;
  font-family: 'PingFangSC-Regular', 'PingFang SC';
  text-decoration: none;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: normal;
  color: #333333;
  line-height: 24px;
  margin: 0;
}
.join-process-img-container {
  img {
    width: 100%;
    height: auto;
    display: block;
    margin: 20px 0px;
  }
}
.join-process-charge-title {
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  font-family: 'PingFangSC-Semibold';
  margin-top: 24px;
}
.join-process-charge-content {
  text-align: left;
}
.join-process-qa-title {
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  font-family: 'PingFangSC-Semibold';
  margin-top: 24px;
}
.join-process-qa-group {
  padding-left: 20px;
}
.join-process-qa-question {
  text-align: left;
  font-weight: 600;
  margin-top: 16px;
}
.join-process-qa-answer {
  text-align: left;
  margin-left: 8px;
}
</style>
